//2015.10.10 1.0 by share.tiger
//2015.10.13 1.1 by share.tiger
//用法 调用share_cutImgShow("原图base64","显示结果的img标签className")

function share_cutImgShow(ImgBase, returnImgClassName) {
	share_var_cutImgBase64 = ImgBase;
	share_var_cutImgReturnToClassName = returnImgClassName;

	var thisHtml = '<div id="tigerCutImg" style="position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,0.7);overflow-y: scroll;overflow-x:hidden;z-index: 9999;">'
				+ '<input id="creatBtn" style="margin-left:5%;margin-top:20px;display:none;width: 90%;height: 40px;border: none;background-color: rgb(56,128,255);color: #fff;border-radius: 5px;font-size: 16px;" type="button" value="裁剪">'
	            + '<div id="oText" style="margin-left:5%;display:none;width:100%;font-size:14px;color:#fff;text-align:left;height:40px;line-height:40px;">* 在图片上滑动以控制裁剪范围</div>'
	            + '<canvas id="originImg" style="margin-left:5%;display:none;background-color:rgba(255,255,255,0.2);"></canvas>'
	            + '<canvas id="showPre" style="margin-left:5%;display:none;background-color:rgba(255,255,255,0.2);margin-top:10px;"></canvas>'
	            + '<div id="showBtns" style="width:100%;margin-top:10px;display:none;">'
	            + '<input id="cancelBtn" style="margin-left:5%;float:left;width: 40%;height: 40px;border: none;background-color: rgb(126, 126, 126);color: #fff;border-radius: 5px;font-size: 16px;" type="button" value="取消"/>'
	            + '<input id="saveBtn" style="float:right;margin-right:5%;width: 40%;height: 40px;border: none;background-color: rgb(24,175,90);color: #fff;border-radius: 5px;font-size: 16px;" type="button" value="确定"/>'
	            + '</div>'
	            + '</div>';

	$("body").prepend(thisHtml);
	share_cutImgShow_drag();
}

function share_cutImgShow_drag() {
    canvas_W = Math.round(parseInt($('#tigerCutImg').css('width')) * 0.9);

    cOri = document.getElementById("originImg");
    ctxOri = cOri.getContext("2d");
    imgOri = new Image();
    imgOri.src = share_var_cutImgBase64; 
    imgOri.onload=function(){
    	thisImg_W = imgOri.width;
    	thisImg_H = imgOri.height;
    	thisImg200_W = canvas_W;
    	thisImg200_H = Math.round(thisImg_H * (canvas_W / thisImg_W));

        //判断形状
        isKuantu = thisImg_W > thisImg_H ? true : false;

    	//填入图片
        $("#originImg").attr("width",thisImg200_W);
        $("#originImg").attr("height",thisImg200_H);
        $("#originImg").css("width",thisImg200_W);
        $("#originImg").css("height",thisImg200_H);
        ctxOri.drawImage(imgOri,0,0,thisImg200_W,thisImg200_H);

        //显示框
        ctxOriLoc = {x:0,y:0};
        //ctxOri.fillStyle = 'rgba(255,255,255,0.5)';
        //ctxOri.fillRect(0,0,thisImg200_W,thisImg200_W);
        //ctxOri.stroke();

	    //显示
        $("#oText").show();
        $("#originImg").show();
        $("#creatBtn").show();
        document.getElementById("originImg").addEventListener('touchmove',share_cutImgShow_listenerCtxOri,false);
        document.getElementById("creatBtn").addEventListener('click',share_cutImgShow_creatNewImg,false);
    };
}

function share_cutImgShow_listenerCtxOri(e){
	e.preventDefault();
    var loc = share_cutImgShow_windowsToCanvas(cOri, e.touches[0].clientX, e.touches[0].clientY);

	//填入图片
    ctxOri.clearRect(0, 0, thisImg200_W, thisImg200_H); 
    ctxOri.drawImage(imgOri,0,0,thisImg200_W,thisImg200_H);

    //显示框
    ctxOri.fillStyle = 'rgba(255,255,255,0.5)';
    if(isKuantu){
        if(loc.x - (thisImg200_H / 2) <= 0){
            ctxOriLoc.x = 0;
        }else if(loc.x - (thisImg200_H / 2) >= thisImg200_W - thisImg200_H){
            ctxOriLoc.x = thisImg200_W - thisImg200_H;
        }else{
            ctxOriLoc.x = loc.x - (thisImg200_H / 2);
        }
        ctxOri.fillRect(ctxOriLoc.x,ctxOriLoc.y,thisImg200_H,thisImg200_H);
    }else{
        if(loc.y - (thisImg200_W / 2) <= 0){
            ctxOriLoc.y = 0;
        }else if(loc.y - (thisImg200_W / 2) >= thisImg200_H - thisImg200_W){
            ctxOriLoc.y = thisImg200_H - thisImg200_W;
        }else{
            ctxOriLoc.y = loc.y - (thisImg200_W / 2);
        }
        ctxOri.fillRect(ctxOriLoc.x,ctxOriLoc.y,thisImg200_W,thisImg200_W);
    }
    ctxOri.stroke();

    if (isKuantu) {
        ctxOri.strokeStyle = 'rgba(0,0,0,0.5)';
        ctxOri.beginPath();
        ctxOri.moveTo(ctxOriLoc.x, 0);
        ctxOri.lineTo(ctxOriLoc.x, thisImg200_H);
        ctxOri.stroke();

        ctxOri.beginPath();
        ctxOri.moveTo(ctxOriLoc.x + thisImg200_H, 0);
        ctxOri.lineTo(ctxOriLoc.x + thisImg200_H, thisImg200_H);
        ctxOri.stroke();

    } else {
        ctxOri.strokeStyle = 'rgba(0,0,0,0.5)';
        ctxOri.beginPath();
        ctxOri.moveTo(0, ctxOriLoc.y);
        ctxOri.lineTo(thisImg200_W, ctxOriLoc.y);
        ctxOri.stroke();

        ctxOri.beginPath();
        ctxOri.moveTo(0, ctxOriLoc.y + thisImg200_W);
        ctxOri.lineTo(thisImg200_W, ctxOriLoc.y + thisImg200_W);
        ctxOri.stroke();
    }
}

function share_cutImgShow_creatNewImg(e){
    $("#showPre").attr("height",canvas_W);
    $("#showPre").attr("width",canvas_W);
    $("#showPre").css("height",canvas_W);
    $("#showPre").css("width",canvas_W);

    $("#originImg").hide();
    $("#creatBtn").hide();
    $("#oText").hide();
    $("#showBtns").show();
    $("#showPre").show();

    document.getElementById("saveBtn").addEventListener("click", share_cutImgShow_saveImg); //保存
    document.getElementById("cancelBtn").addEventListener("click", share_cutImgShow_cancelImg); //取消

    //小图
    ctxOri.clearRect(0, 0, thisImg200_W, thisImg200_H); 
    ctxOri.drawImage(imgOri,0,0,thisImg200_W,thisImg200_H);

    img = document.getElementById("originImg");
    cPre = document.getElementById("showPre");
    ctxPre = cPre.getContext("2d");
    //清空画布
    ctxPre.clearRect(0, 0, canvas_W, canvas_W);


    if(isKuantu){
        ctxPre.drawImage(img, Math.round(ctxOriLoc.x), Math.round(ctxOriLoc.y), thisImg200_H, thisImg200_H, 0, 0, canvas_W, canvas_W);
    }else{
        ctxPre.drawImage(img, Math.round(ctxOriLoc.x), Math.round(ctxOriLoc.y), thisImg200_W, thisImg200_W, 0, 0, canvas_W, canvas_W);
    }
    //Alert(Math.round(ctxOriLoc.x) + "," + Math.round(ctxOriLoc.y) + "," + thisImg200_H + "," + thisImg200_W + "," + canvas_W);
}

function share_cutImgShow_saveImg(event) {
	var image = new Image();
		image.src = cPre.toDataURL("image/png");
        console.log(image.src);
    //$("#" + share_var_cutImgReturnToId).attr("src", image.src);
    $("." + share_var_cutImgReturnToClassName + ":last").attr('src', image.src);
    $("#tigerCutImg").remove();
}

function share_cutImgShow_cancelImg(){
    $("#originImg").show();
    $("#creatBtn").show();
    $("#oText").show();
    $("#showBtns").hide();
    $("#showPre").hide();
}

function share_cutImgShow_windowsToCanvas(canvas, x,y){
    var bbox = canvas.getBoundingClientRect();
    return {
    	x: x - bbox.left * (canvas.width / bbox.width),
    	y: y - bbox.top * (canvas.height / bbox.height)
    };
}
